<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
  <div id="app">
    <h1 class="text-center text-info">购物车</h1>
    <div class="container">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>
              全选
              <input type="checkbox" v-model="checkAll" @change="allCheck">
            </th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in cart" :key="index">
            <td>
              <input type="checkbox" v-model="item.check" @change="itemCheck">
            </td>
            <td>
              <img :src="item.img" alt="" width="100">
              <p>{{item.name}}</p>
            </td>
            <td>{{item.price}}</td>
            <td>
              <button class="btn btn-danger" @click="sub(index)">-</button>
              <span>{{item.num}}</span>
              <button class="btn btn-info" @click="add(index)">+</button>
            </td>
            <td>{{item.num * item.price}}</td>
            <td>
              <button class="btn btn-danger">删除</button>
            </td>
          </tr>
          <tr>
            <td>-</td>
            <td>总计：</td>
            <td>{{totalPrice}}元</td>
            <td>{{totalNum}}件</td>
            <td>-</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 是否全选
        checkAll: false,
        cart: [
          {
            name: 'vivo IQ777',
            img: 'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp',
            price: 2999,
            num: 1,
            check: false
          },
          {
            name: '小米10',
            img: 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/97161/40/12127/66234/5e440190E7cd0f54e/33627b2c39a67241.jpg.webp',
            price: 999,
            num: 1,
            check: false
          },
          {
            name: '传世的珐琅锅',
            img: 'https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/168750/15/16697/127861/606c22c0Eca19515e/5adfe8e452fffbff.png.webp',
            price: 1799,
            num: 1,
            check: false
          },
          {
            name: '蔻驰的丑包',
            img: 'https://img12.360buyimg.com/ceco/s300x300_jfs/t1/119430/19/3585/133796/5eb12fe7E1a4ee264/392d83858bb8cd52.jpg!q70.jpg.webp',
            price: 17865,
            num: 1,
            check: false
          },
        ]
      },
      computed: {
        // 计算总数量
        totalNum() {
          let num = 0;
          this.cart.forEach(item => {
            if(item.check) {
              num += item.num
            }
          });
          return num
        },
        // 计算总金额
        totalPrice() {
          let num = 0;
          this.cart.forEach(item => {
            if(item.check) {
              num += item.num * item.price
            }
          });
          return num
        }
      },
      methods: {
        add(index) {
          // 简单处理，可以一直加，不考虑库存
          this.cart[index].num++
        },
        sub(index) {
          this.cart[index].num > 1 ? this.cart[index].num-- : this.cart[index].num = 1
        },
        // 点击全选
        allCheck() {
          // this.checkAll就是是否全选的值，将这个值赋值给cart中的每一项
          this.cart.forEach(item => {
            item.check = this.checkAll
          })
        },
        itemCheck() {
          // 点击每一项
          this.checkAll = this.cart.every(item => {
            return item.check
          })
        }
      },
    })
  </script>
</body>

</html>